/**
 * 物业费详情
 * @author truexin
 * @date   2016/11/08
 */

import PullRefresh from '../components/mui/PullRefresh.js';
import MenuBtn from '../components/MenuBtn.js';

const lf = liefeng,
    R = React,
    RC = React.createClass,
    getUrlParam = lf.utils.getUrlParam,
    doAction = lf.bridgeJs.doAction,
    ajax = lf.utils.ajax;

let name = getUrlParam('name');
let projectName = '';
if (name == 1) {
    projectName = '锦鸿花园';
} else if (name == 2) {
    projectName = '紫苑';
} else if (name == 3) {
    projectName = '东江乐乐家';
} else {
    projectName = '列丰小区';
}

const SelectMonth = RC({
    getInitialState() {
        return {
            title: '2016年11月'
        }
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div className="flex select-month">
            <p className="flex-item">
                <span className="arrowleft mui-icon mui-icon-arrowleft"></span>
                <span className=" title-name">{this.state.title}</span>
                <span className="arrowright mui-icon mui-icon-arrowright"></span>
            </p>
        </div>
    }
})
const TwoBtn = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div className="flex">
            <div className="flex-item panel">
                <p className="this-month">本月收益（元）</p>
                <p className="counts">255.365.634</p>
            </div>
            <div className="flex-item panel">
                <p className="this-month">累计欠费（元）</p>
                <p className="counts red">255.365.836</p>
            </div>
        </div>
    }
})
const DetailList = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div >
            <div className="detail-panel">
                <h3 >
                    {projectName}
                </h3>
                <p className="mui-table-view-cell ">
                    <span className="range first">本月已收 :</span>
                    <span> 102,345,567元</span>
                
                </p>
                <p className="mui-table-view-cell ">
                    <span className="range first">累计欠费 :</span>
                    <span className="red"> 102,345,567元</span>
                </p>
                <p className="mui-table-view-cell ">
                    <span className="range first">已缴户数 :</span>
                    <span> 1056户</span>
                
                </p>
                <p className="mui-table-view-cell ">
                    <span className="range first">未缴户数 :</span>
                    <span className="red"> 1056户</span>
                </p>
            </div>
            <div className="detail-panel">
                <h3 >
                    欠费明细
                </h3>
                <p className="mui-table-view-cell ">
                    <span className="range">物业管理费 :</span>
                    <span> 102,345,567元</span>
                </p>
                <p className="mui-table-view-cell ">
                    <span className="range">维修基金 :</span>
                    <span> 102,345,567元</span>
                </p>
                <p className="mui-table-view-cell ">
                    <span className="range">水费 :</span>
                    <span> 105,345元</span>
                
                </p>
                <p className="mui-table-view-cell ">
                    <span className="range">排污费 :</span>
                    <span> 105,345元</span>
                
                </p>
            </div>
        
        </div>
    }
})
const Root = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div className="fee-census fee-home-detail">
            <SelectMonth/>
            <DetailList/>
        </div>
    }
});

lf.appJs.getUser(function (user) {
    // lf.appJs.setTitle('费用统计');
    R.render(
        <Root user={user}/>,
        document.getElementById('root'), ()=> {
            $('#root').css({
                background: '#f2f2f2',
            });
            $('html').css({
                height: '100%'
            });
            $('body').css({
                height: '100%'
            });
        }
    );
});



